<template>
  <div>
    <div class="outmain ba_f">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>实时概况</span>
        </div>
      </div>
      <div class="flex-bet">
        <div class="bflex-7 flex-y-top bor_b_r4">
          <div class="pad_20 flex-g-1">
            <div class="fon_14 color_9 lh25">今日售卡数量</div>
            <div class="fon_30 color_3 lhh40">{{ surverData.todayNum }}</div>
            <div class="fon_12 color_9 flex lh25">
              <div class>昨日：{{ surverData.yesterdayNum }}</div>
              <!-- <div class="mar_l20">较前一天：{{ surverData.deUser }}%</div> -->
            </div>
          </div>
          <div class="pad_20 flex-g-1">
            <div class="fon_14 color_9 lh25">今日售卡金额</div>
            <div class="fon_30 color_3 lhh40">{{ surverData.todayMoney }}</div>
            <div class="fon_12 color_9 flex lh25">
              <div class>昨日：{{ surverData.yesterdayMoney }}</div>
              <!-- <div class="mar_l20">较前一天：{{ surverData.dePay }}%</div> -->
            </div>
          </div>
          <div class="pad_20 flex-g-1">
            <div class="fon_14 color_9 lh25">累计售卡数量</div>
            <div class="fon_30 color_3 lhh40">{{ surverData.allNum }}</div>
            <div class="fon_12 color_9 flex lh25">
              <!-- <div class="mar_l20 color_f">较前一天：%</div> -->
            </div>
          </div>
          <div class="pad_20 flex-g-1">
            <div class="fon_14 color_9 lh25">累计售卡金额</div>
            <div class="fon_30 color_3 lhh40">{{ surverData.allMoney }}</div>
            <div class="fon_12 color_9 flex lh25">
              <!-- <div class="mar_l20 color_f">较前一天：%</div> -->
            </div>
          </div>
        </div>
        <div class="bflex-3 flex-bet">
          <div class="pad_20 flex-g-1">
            <div class="fon_14 color_9 lh25">总开通数量</div>
            <div class="fon_30 color_3 lhh40">
              {{ surverData.allUserNum }}
              <span class="fon_12">(人)</span>
            </div>
            <div class="fon_12 color_9 lh25">
              <span class="fon_16">未续卡：{{ surverData.allEndUserNum }}</span>
              (人)
            </div>
          </div>
          <div class="flex-g-1">
            <div ref="mainEch" style="height: 220px;width:300px;margin-left: 30px"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="t_r mar_t20">
      <div class="fon_12 mar_r10 color_9">
        <span class="fon_14 color_3">时间筛选：</span>
        <el-date-picker v-model="formData.time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy年MM月dd日" class="mar_l10" @change="init"></el-date-picker>
      </div>
    </div>
    <div class="outmain ba_f mar_t10">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>开卡概况</span>
        </div>
      </div>
      <!-- <div class="flex flex-nowrap pad_tb_10 c2RF">
        <div class="crf all mar_r10 curset">
          <p class="font_w500 fon_16 lh25">开卡</p>
          <div class="mar_t15 flex-bet fon_14">
            <div class="color_9">用户数</div>
            <div class>{{ userData.userSum }}</div>
          </div>
        </div>
        <div class="crf mili mar_r10 notall">
          <p class="font_w500 fon_16 lh25">未续卡</p>
          <div class="mar_t15 flex-bet fon_14">
            <div class="color_9">用户数</div>
            <div class>{{ userData.miniSum }}</div>
          </div>
        </div>
      </div>-->
      <div class="mar_t20">
        <div class="flex mar_b5" style="background: rgb(92, 137, 253)">
          <div class="serleft color_f pad_lr_10 t_c flex">
            <span class="fon_16">开卡数据</span>
          </div>
          <div class="serright pad_lr_10">
            <div class="rightmoder pad_20 fon_14">
              <div class>售卡数量</div>
              <div class="pad_tb_10">{{ surverData.requestNum }}</div>
            </div>
            <div class="rightmoder pad_20 fon_14">
              <div class>售卡金额</div>
              <div class="pad_tb_10">{{ surverData.requestMoney }}</div>
            </div>
            <div class="rightmoder pad_20 fon_14">
              <div class>老用户续卡</div>
              <div class="pad_tb_10">{{ surverData.oldUser }}</div>
            </div>
            <div class="rightmoder pad_20 fon_14">
              <div class>新用户开卡</div>
              <div class="pad_tb_10">{{ surverData.newUser }}</div>
            </div>
          </div>
        </div>
        <div class="flex mar_b5" style="background: rgb(88, 202, 121)">
          <div class="serleft color_f pad_lr_10 t_c flex" style="background: rgb(88, 202, 121)">
            <span class="fon_16">用户数据</span>
          </div>
          <div class="serright pad_lr_10" style="background: rgb(240, 248, 240);">
            <div class="rightmoder pad_20 fon_14">
              <div class>开卡用户(人)</div>
              <div class="pad_tb_10">{{ surverData.userNum }}</div>
            </div>
            <div class="rightmoder pad_20 fon_14">
              <div class>未续费用户(人)</div>
              <div class="pad_tb_10">{{ surverData.endUserNum }}</div>
            </div>
            <div class="rightmoder pad_20 fon_14">
              <div class>总开卡用户(人)</div>
              <div class="pad_tb_10">{{ surverData.allUserNum }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="outmain ba_f mar_t20">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>开卡总览</span>
        </div>
      </div>
      <div ref="mainEch2" style="height:400px"></div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts';
import { mapState } from 'vuex';
import { getVipSurvey } from '@/api/plug.js';

export default {
  data() {
    return {
      formData: {
        time: [new Date(new Date().setDate(new Date().getDate() - 14)), new Date()]
      },
      surverData: {},
      userData: {},
      echarts1_option: {
        color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F'],
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['开卡用户', '未续卡用户']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 35, name: '开卡用户' },
              { value: 310, name: '未续卡用户' }
            ]
          }
        ]
      },
      echarts1_option2: {
        color: ['#2A75ED', '#2FCE63'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['售卡数量', '售卡金额']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: {
            show: false,
            lineStyle: {
              color: '#ccc',
              type: 'dashed'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          // x轴的颜色和宽度
          axisLine: {
            lineStyle: {
              color: '#4ECB73',
              width: 2 //这里是坐标轴的宽度,可以去掉
            }
          },
          data: []
        },
        yAxis: {
          type: 'value',
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dotted',
              color: '#DDDDDD'
            },
            show: true
          }
        },
        series: [
          {
            name: '售卡数量',
            type: 'line',
            stack: '总量',
            data: [],
            smooth: true
          },
          {
            name: '售卡金额',
            type: 'line',
            stack: '总量',
            data: [],
            smooth: true
          }
        ]
      },
      echartsOne: null,
      echartsTwo: null
    };
  },
  computed: {
    ...mapState(['market']),
    parmse() {
      return {
        startTime: this.$moment(this.formData.time[0]).format('YYYY-MM-DD'),
        endTime: this.$moment(this.formData.time[1]).format('YYYY-MM-DD')
      };
    }
  },
  mounted() {
    // this.bus.$emit('loading', true);
    this.init();
  },
  methods: {
    changeTime() {},
    init() {
      getVipSurvey(this.parmse).then((res) => {
        if (res.code == 1) {
          res.data.numArr.forEach((item) => {
            this.echarts1_option2.xAxis.data.push(item.hours);
            this.echarts1_option2.series[0].data.push(item.money);
          });
          this.echarts1_option.series[0].data[0].value = res.data.allUserNum;
          this.echarts1_option.series[0].data[1].value = res.data.allEndUserNum;
          this.surverData = res.data;
          this.echarts_one();
          this.echarts_two();
          // this.bus.$emit('loading', false);
        }
      });
    },
    echarts_one() {
      this.echartsOne = echarts.init(this.$refs.mainEch2);
      this.echartsOne.setOption(this.echarts1_option2);
    },
    echarts_two() {
      this.echartsTwo = echarts.init(this.$refs.mainEch);
      this.echartsTwo.setOption(this.echarts1_option);
    }
  }
};
</script>
<style lang="scss" scoped>
.c2RF {
  height: 92px;
}

.curset {
  background-color: #edf4ff;
  border-color: #155bd4;
}

.crf {
  height: 92px;
  min-width: 200px;
  max-width: 240px;
  border: 1px solid #dcdee0;
  border-radius: 4px;
  padding: 16px;
  box-sizing: border-box;
  flex: 1 1 200px;
  cursor: pointer;
  transition: box-shadow 0.2s ease 0s;
}

.serleft {
  background-color: rgb(92, 137, 253);
  min-width: 80px;
}

.serright {
  background-color: rgb(243, 247, 253);
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

.rightmoder {
  min-width: 200px;
  width: 25%;
}

.notall {
  color: #c8c9cc;
  background-color: #f7f8fa;
  cursor: not-allowed;
}

.lhh40 {
  line-height: 40px;
  height: 40px;
}
</style>
